<template>
    <div class="admin-page">
        <div class="page-header">
            <div style="display: flex;justify-content: space-between">
                <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        用户名:
                        <el-input v-model="form.username" size="small"
                                  style="width: 70%;margin-left: 10px;"></el-input>
                    </div>
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        方式:
                        <el-select v-model="form.type" size="small" style="width: 70%;margin-left: 10px;">
                            <el-option label="直推" value="1"></el-option>
                            <el-option label="挂点" value="2"></el-option>
                        </el-select>
                    </div>
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        子节点:
                        <el-input v-model="form.children_username" size="small"
                                  style="width: 70%;margin-left: 10px;"></el-input>
                    </div>
                </div>
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <el-button type="primary" size="mini" @click="toSearch" style="margin-left: 15px;">搜索</el-button>
                </div>
            </div>

<!--            <el-tree
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                node-key="id"
                style="width: 100%;height: 65vh;overflow-y: auto;margin-top: 20px;"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.id }} --- {{ data.username }} --- {{ data.nickname }} (业绩: {{ data.money }}) --- {{
                            getLevelName(data.is_up)
                        }}</span>
                </span>
            </el-tree>-->

            <div style="height: 700px; border:1px solid #eee">
                <zm-tree-org
                    ref="tree"
                    :data="data"
                    :disabled="disaled"
                    :horizontal="horizontal"
                    :collapsable="collapsable"
                    :label-style="style"
                    :node-draggable="true"
                    :default-expand-level="1"
                    :only-one-node="onlyOneNode"
                    :clone-node-drag="cloneNodeDrag"
                    :before-drag-end="beforeDragEnd"
                    :toolBar="toolBar"
                    :filterNodeMethod="filterNodeMethod"
                    @on-node-drag="nodeDragMove"
                    @on-node-drag-end="nodeDragEnd"
                    @on-contextmenu="onMenus"
                    @on-expand="onExpand"
                    @on-node-click="onNodeClick"
                    @on-node-dblclick="onNodeDblclick"
                    @on-node-copy="onNodeCopy"
                >
                </zm-tree-org>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            toolBar: {
                scale: false
            },
            keyword: '',
            data: {
                id: 0,
                label: "根节点",
                children: []
            },
            horizontal: true,
            collapsable: true,
            onlyOneNode: true,
            cloneNodeDrag: true,
            expandAll: true,
            disaled: false,
            style: {
                background:'#fff',
                color:'#5e6d82'
            },
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'username'
            },
            currentPage: 1,
            pageSize: 15,
            searchParams:{},
            total: 0,
            form: {
                username: "",
                children_username:"",
                type: "1"
            },
            levelMap: [
                "萌新",
                "初级服务商",
                "中级服务商",
                "高级服务商",
                "区域服务商",
                "城市服务商",
                "大区服务商",
                "全球服务商"
            ]
        };
    },
    methods: {
        fetchAdminList(params = {}) {
            const requestParams = {
                ...this.form,
                page: params.page || this.currentPage,
            };
            this.$http.get('/admin/User/getChildrenInfo', {params: requestParams}).then(result => {
                if (result.code === 200) {
                    const dataArr = result.data;
                    if (Array.isArray(dataArr) && dataArr.length > 0) {
                        const convertNode = (node, level = 1) => {
                            return {
                                id: node.id,
                                label: `${node.username} - ${node.nickname} (业绩: ${node.money})`,
                                children: Array.isArray(node.children) ? node.children.map(child => convertNode(child, level + 1)) : [],
                                style: this.getNodeStyle(node.self_re_code),
                                expand: false
                            };
                        };
                        this.data = {
                            label: this.form.username || "根节点",
                            children: dataArr.map(item => convertNode(item, 1))
                        };
                    } else {
                        this.data = [];
                    }
                    this.total = result.data.total || 0;
                }
            });
        },
        getNodeStyle(rsCode) {
            // You can customize the style based on self_rs_code
            const styles = {
                'XITA': { color: '#fff', background: '#108ffe' },
                'BRAT': { color: '#fff', background: '#42b983' },
                'SMBH': { color: '#fff', background: '#f56c6c' },
                // Add more styles for different rs_codes as needed
            };
            return styles[rsCode] || { background: '#fff', color: '#5e6d82' };
        },
        getLevelName(value) {
            const index = parseInt(value);
            return this.levelMap[index] || "未知等级";
        },
        handleSizeChange(val) {
            this.pageSize = 15;
            this.fetchAdminList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchAdminList(this.searchParams);
        },
        toSearch() {
            this.searchParams = {
                ...this.form,
            };
            this.currentPage = 1;
            this.fetchAdminList(this.searchParams);
        },
        reset() {
            this.form = {
                username: "",
                children_username: "",
                type: "1"
            };
            this.currentPage = 1;
            this.fetchAdminList();
        },
        onMenus({node, command}) {
            console.log(node, command)
        },
        filter(){
            this.$refs.tree.filter(this.keyword)
        },
        filterNodeMethod(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        onExpand(e, data) {
            console.log(e, data)
        },
        nodeDragMove(data){
            console.log(data)
        },
        beforeDragEnd(node, targetNode) {
            return new Promise((resolve, reject) => {
                if (!targetNode) reject();
                if (node.id === targetNode.id) {
                    reject()
                } else {
                    resolve()
                }
            })
        },
        nodeDragEnd(node, parentNode){
            node.id === parentNode.id && this.$Message.info("移动到自身")
        },
        onNodeClick(e, data) {
            this.$Message.info(data.label)
        },
        onNodeDblclick(){
            this.$Message.info("双击节点")
        },
        onNodeCopy(){
            this.$Message.success("复制成功")
        },
        toggleExpand(data, val) {
            if (Array.isArray(data)) {
                data.forEach(item => {
                    this.$set(item, "expand", val);
                    if (item.children) {
                        this.toggleExpand(item.children, val);
                    }
                });
            } else {
                this.$set(data, "expand", val);
                if (data.children) {
                    this.toggleExpand(data.children, val);
                }
            }
        }
    },
    created(){
        // this.toggleExpand(this.data, this.expandAll);
    },
    mounted() {
        this.fetchAdminList();
    }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/deep/ .el-dialog__header {
    padding: 10px !important;
    text-align: center;
}

.admin-page {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    .page-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;
    }
}

.tip-text {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}

/deep/ .el-tab-pane {
    height: 650px;
    overflow-y: auto;
}

///deep/ .draggable{
//    display: none;
//}

</style>




<!--
<template>
    <div class="admin-page">
        <div class="page-header">
            <div style="display: flex;justify-content: space-between">
                <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        用户名:
                        <el-input v-model="form.username" size="small"
                                  style="width: 70%;margin-left: 10px;"></el-input>
                    </div>
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        方式:
                        <el-select v-model="form.type" size="small" style="width: 70%;margin-left: 10px;">
                            <el-option label="直推" value="1"></el-option>
                            <el-option label="挂点" value="2"></el-option>
                        </el-select>
                    </div>
                    <div style="display: flex;text-align: center;line-height: 36px;" class="grid-content bg-purple">
                        子节点:
                        <el-input v-model="form.children_username" size="small"
                                  style="width: 70%;margin-left: 10px;"></el-input>
                    </div>
                </div>
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <el-button type="primary" size="mini" @click="toSearch" style="margin-left: 15px;">搜索</el-button>
                </div>
            </div>

            <el-tree
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                node-key="id"
                style="width: 100%;height: 65vh;overflow-y: auto;margin-top: 20px;"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.id }} -&#45;&#45; {{ data.username }} -&#45;&#45; {{ data.nickname }} (业绩: {{ data.money }}) -&#45;&#45; {{
                            getLevelName(data.is_up)
                        }}</span>
                </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'username'
            },
            currentPage: 1,
            pageSize: 15,
            searchParams:{},
            total: 0,
            form: {
                username: "",
                children_username:"",
                type: "1"
            },
            levelMap: [
                "萌新",
                "初级服务商",
                "中级服务商",
                "高级服务商",
                "区域服务商",
                "城市服务商",
                "大区服务商",
                "全球服务商"
            ]
        };
    },
    methods: {
        fetchAdminList(params = {}) {
            const requestParams = {
                ...this.form,
                page: params.page || this.currentPage,
            };
            this.$http.get('/admin/User/getChildrenInfo', {params: requestParams}).then(result => {
                if (result.code === 200) {
                    const dataObj = result.data.data;
                    const newListData = [];
                    for (const key in dataObj) {
                        if (dataObj.hasOwnProperty(key)) {
                            newListData.push(dataObj[key]);
                        }
                    }

                    // Convert flat list to tree structure
                    if (newListData.length > 0) {
                        const rootNode = newListData[0];
                        rootNode.children = [];

                        for (let i = 1; i < newListData.length; i++) {
                            const currentNode = newListData[i];
                            const parentNode = newListData[i - 1];

                            currentNode.children = [];
                            if (parentNode.children) {
                                parentNode.children.push(currentNode);
                            }
                        }

                        this.treeData = [rootNode];
                    } else {
                        this.treeData = [];
                    }

                    this.total = result.data.total || newListData.length;
                }
            });
        },
        getLevelName(value) {
            const index = parseInt(value);
            return this.levelMap[index] || "未知等级";
        },
        handleSizeChange(val) {
            this.pageSize = 15;
            this.fetchAdminList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchAdminList(this.searchParams);
        },
        toSearch() {
            this.searchParams = {
                ...this.form,
            };
            this.currentPage = 1;
            this.fetchAdminList(this.searchParams);
        },
        reset() {
            this.form = {
                username: "",
                children_username: "",
                type: "1"
            };
            this.currentPage = 1;
            this.fetchAdminList();
        },
    },
    mounted() {
        this.fetchAdminList();
    }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/deep/ .el-dialog__header {
    padding: 10px !important;
    text-align: center;
}

.admin-page {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    .page-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;
    }
}

.tip-text {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}

/deep/ .el-tab-pane {
    height: 650px;
    overflow-y: auto;
}

</style>-->




